<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <p class="demo">我的文字可以来回切换</p>
    <p>我的文字可以来回切换</p>
    <p>我的文字可以来回切换</p>

    <select name="" id="sel">
        <option value="red">红色</option>
        <option value="yellow">黄色</option>
        <option value="blue">绿色</option>
    </select>

    <input type="text" value="在此输入内容">
    <script>
        let p1 = document.querySelectorAll('p')
        p1.forEach(el => console.log(el))
        let p = document.querySelector('div') //标签选择器
        let sel = document.querySelector('#sel')


        sel.onchange = () => {
            document.body.style.backgroundColor = sel.value
        }

        // 获取焦点 失去焦点 
        let txt = document.querySelector('input')
        txt.onfocus = () => {
            txt.value = ''
        }
        txt.onblur = () => {
            let val = txt.value
            val ==''? txt.value = '请输入内容' : txt.value

        }
        // 获取焦点 清空信息 失去焦点 加入是空 即使不能为空 加入非数字提示不合法 长度<6 长度不够，加入是数字，正确
        //设置字号20 22 24
        // 京东图片放上去显示 移开隐藏
        // 隔行变色



    </script>
</body>

</html>